<template>
    <view class="content">
        <view class="uni-list">
            <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news"
                :key="index" @click="openinfo" :data-newsid="item.post_id">
                <view class="uni-media-list">
                    <image class="uni-media-list-logo" :src="item.author_avatar"></image>
                    <view class="uni-media-list-body">
                        <view class="uni-media-list-text-top">{{item.title}}</view>
                        <view class="uni-media-list-text-bottom uni-ellipsis">{{item.created_at}}</view>
                    </view>
                
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // title: 'Hello'
                news:[]
            };
        },
        onLoad:function(){
            uni.showLoading({
                title:"加载中。。。"
            })
            uni.request({
                url:'http://unidemo.dcloud.net.cn/api/news',
                methods:'GET',
                data:{},
                success:res=>{
                    this.news=res.data;
                    uni.hideLoading();
                },
                fail:()=>{},
                complete:()=>{}
            });

        },
        methods: {
            openinfo(e){
                console.log(e);
                var newsid=e.currentTarget.dataset.newsid;
                uni.navigateTo({
                    url:'../detail/detail?newsid='+newsid
                })
            }

        }
    }
</script>

<style lang="scss">
 .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    } 
    .uni-media-list-body{
        height: auto;
    }
    .uni-media-list-text-top{
        line-height:1.6em;
    }

</style>